<template>
  <div class="header_container">

    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item v-for="(breadcrumb, index) in breadcrumbs" :key="index">
        <router-link :to="breadcrumb.path">{{ breadcrumb.name }}</router-link>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <el-dropdown>
      <el-avatar :size="30" class="avator"
                 src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="home">首页</el-dropdown-item>
          <el-dropdown-item command="loginout">退出</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import {useRoute, useRouter} from 'vue-router';

const route = useRoute();
const router = useRouter();

const breadcrumbs = computed(() => {
  const paths = route.path.split('/').filter(path => path);
  const breadcrumbArray = [];
  let currentPath = '';

  paths.forEach((path, index) => {
    currentPath += `/${path}`;
    const route = router.getRoutes().find(r => r.path === currentPath);
    if (route) {
      breadcrumbArray.push({
        path: currentPath,
        name: route.meta.title || 'Unnamed'
      });
    }
  });

  return breadcrumbArray;
});

</script>

<style scoped>

.header_container {
  background-color: #EFF2F7;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 20px;
}

.avator {
  border-radius: 50%;
  margin-right: 37px;
}

.el-dropdown-menu__item {
  text-align: center;
}
</style>